<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
export default {
    name: 'Threeaa',
    created(){
       
    },
    mounted(){
        this.init()
        this.animate()
    },
    methods: {
        init() {
             let container = document.getElementById("container");
            //  // 创建相机
            // this.camera = new Three.PerspectiveCamera(70,container.clientWidth / container.clientHeight,0.01,1000);
            // this.camera.position.z = 0.5;

            // // 创建一个场景
            // this.scene = new Three.Scene();
            // let geometry = new Three.CylinderBufferGeometry(0.2, 0.2, 0.2);
            // let material = new Three.MeshNormalMaterial();
            // this.mesh = new Three.Mesh(geometry, material);
            // this.scene.add(this.mesh);

            // // 创建渲染器
            // this.renderer = new Three.WebGLRenderer({ antialias: true });
            // this.renderer.setSize(container.clientWidth, container.clientHeight);
            // container.appendChild(this.renderer.domElement);

        this.camera = new THREE.PerspectiveCamera(70,container.clientWidth / container.clientHeight,0.01,1000);
        this.camera.position.z = 0.5;

         /**
       * 创建场景对象
        */
       this.scene=new THREE.Scene();
       /**
        * 创建网格模型
        */
       var box=new THREE.BoxGeometry(100,100,100);//创建一个立方体几何对象
       var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象
       var mesh=new THREE.Mesh(box,material);//网格模型对象
       this.scene.add(mesh);//网格模型添加到场景中


       /**
       * 创建渲染器对象
        */
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        this.renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
        container.appendChild(this.renderer.domElement);

    //    var renderer=new THREE.WebGLRenderer();
    //    renderer.setSize(200,100);
    //    renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
    //     container.appendChild(this.renderer.domElement);//body元素中插入canvas对象
       //执行渲染操作
       this.renderer.render(this.scene,this.camera);    


        },
        animate() {
            requestAnimationFrame(this.animate);
            this.mesh.rotation.x += 0.01;
            this.mesh.rotation.y += 0.02;
            this.renderer.render(this.scene, this.camera);
        }
    }
}
</script>

<style>
* {
    padding: 0;
    margin: 0;
}
html,body,#app, #container{
    height: 100%;
    width: 100%;
}
</style>